<template>
   <fieldset>
        <legend>tab切换</legend>
        <button v-for="btn in buttons" :key="btn"  @click="handleClick(btn)" :class="['tab-button',{active:btn===selectBtn}]">{{btn}}</button>
        <div class="tab" :is="box"></div>


   </fieldset>
    
</template>
<script>
import singA from "./sing.vue"
import songA from "./song.vue"
import singerA from "./singer.vue"

 export default{
    components:{
        singA,
        songA,
        singerA
    },
    data(){
        return{
            buttons:["sing","song","singer"],
            selectBtn:"sing"
        }
    },
    methods:{
        handleClick(btn){
            return  this.selectBtn=btn
        }
    },
    computed:{
        box(){
            
            return this.selectBtn+'A'

        }
        
    }
 }


</script>
<style scoped>
    .tab-button {
        padding: 6px 10px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border: 1px solid #ccc;
        cursor: pointer;
        background: #f0f0f0;
        margin-bottom: -1px;
        margin-right: -1px;
    }

    .tab-button:hover {
        background: #e0e0e0;
    }

    .tab-button.active {
        background:aqua;
    }

    .tab {
        border: 1px solid #ccc;
        padding: 10px;
    }
    h1 {
        margin:0;
    }
</style>
